<!--群组列表组件-->
<template>
    <div class=" w-full bg-base-100 shadow-xl">
      <div class="sticky top-0 bg-white z-9">
        群组列表
      </div>
      <!-- 群组列表 -->
      <table class="table">
        <!-- head -->
        <thead>
        <tr>
          <th></th>
        </tr>
        </thead>
        <tbody>
        <template v-for="it in chatStore.getGroupList">
          <!-- row 1 -->
          <tr>
            <td @click="clickInto(it)">
              <div class="flex items-center gap-3">
                <div class="avatar online placeholder">
                  <div class="rounded-full w-12">
                    <img :src="it.avatarUrl" alt="Avatar" oncontextmenu="return false" />
                  </div>
                </div>
                <div>
                  <div class="font-bold">{{ it.name }}</div>
                </div>
              </div>
            </td>
          </tr>
        </template>
        </tbody>
      </table>
    </div>
    <MyDialog :title="'搜索用户'" :customSize="{high:'h-2/3',width:'w-full',max:'max-w-3xl'}"  :dialogVisible="dialogVisible" @closed="() => dialogVisible=false">
      <FindUserPanel/>
    </MyDialog>
</template>

<script setup lang="ts">

import {ref} from "vue";
import {useChatStore} from "@/stores/chat.ts";
import MyDialog from "@/components/MyDialog.vue";
import FindUserPanel from "@/views/contacts_components/FindUserPanel.vue";
import type {GroupItem} from "@/models/contacts.ts";

const emits = defineEmits([
  "intoGroup", "closed"
])

const chatStore = useChatStore();

const dialogVisible = ref(false)

const clickInto = (it:GroupItem) => {
  console.log(`click group: name=${it.name}`);
  // activeContact.value = it;
  emits('intoGroup',it)
}


const clickAdd = ()=>{
  console.debug("clickAdd...")

  //dialogVisible.value = true
}



// if (chatStore.getContactList.length>0){
//   clickInto(chatStore.getContactList[0])
// }

</script>

<style scoped lang="scss">

</style>